var myScroll,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');
		// for循环可改为$.post来读取数据
		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.className = 'ub cl-b-white clickable ssp-item';
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('scroll-wrapper', {
		useTransition: true,
		onRefresh: function () {
			 if (pullUpEl.className.match('loading')) {
				pullUpEl.className = 'cl-b-lgrey cl-f-lgrey ub ub-ac ub-pc';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
			}
		},
		onScrollMove: function () {
			 if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
			 	console.log("2."+this.maxScrollY);
				pullUpEl.className = 'flip cl-b-lgrey cl-f-lgrey ub ub-ac ub-pc';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				console.log("1."+this.maxScrollY);
				pullUpEl.className = 'cl-b-lgrey cl-f-lgrey ub ub-ac ub-pc';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
				// this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading cl-b-lgrey cl-f-lgrey ub ub-ac ub-pc';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
			$('#scroll-wrapper').trigger('scroll');
		}
	});
	
	setTimeout(function () { document.getElementById('scroll-wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);